import { func } from "prop-types"
import React, { Component, useState, } from "react"
import { useReducer } from "react"
import "./index.less"
class Test extends Component {
    state = {
        count: 60
    }
    render() {
        return <div>
            <button onClick={() => { this.setState({ count: this.state.count + 1 }) }}>
                Click({this.state.count})

            </button>
        </div>
    }
}
// export default Test
function App(props) {
    const [count, setCount] = useState(() => {
        return props.defaultCount || 0
    })
    const inite = () => {
        return 1
    }
    const [number, setNumber] = useState(inite)
    const [reducer, dispath] = useReducer((state, action) => {
        if (action == 'add') {
            return state + 1
        } else {
            return state - 1
        }
    }, 0)
    const lazy = () => {
        setTimeout(() => {
            setCount(num => num + 1)
            setNumber(num => num + 1)
        }, 3000);
    }
    return (
        <div>
            <button onClick={() => { setCount(count + 1) }}>
                Click({count})
            </button>
            <button onClick={lazy}>
                lazy
            </button>
            <h1>{number}</h1>

            <button onClick={() => { dispath('add') }}>
                useReducer add
            </button>
            <button onClick={() => { dispath('-') }}>
                useReducer --
            </button>
            <h1>{reducer}:{reducer}</h1>

        </div>
    )
}


export default App